import QtQuick 2.5
import QtCharts 2.3
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4

Item {
    id:root
    width: 800
    height: 480
    property real minSize: Math.min(width/800, height/480)
    property bool abAxisYAlign: false

    property color colorTypeug: "#FF0000"
    property color colorTypeif: "#70379A"
    property color colorTypeil: "#DD5555"
    property color colorTypeusyn:  "#2872b3"
    property color colorTypeugd:  "#018e5a"
    property color colorTypeigd: "#0000FF"
    property color colorTypeuk:  "#BB9977"
    property color colorTypep:  "#F90688"
    property color colorTypeq:  "#0795be"
    property color colorTypef:  "#90c803"
    property color colorTypeus:  "#8F396D"


    Rectangle {
        id: rectangle_ChartABackground
        color: "#AAAADDAA"
        anchors.fill: chartA
        property real minSize: Math.min(width/696, height/235)
        Text {
            color: "#55e6ea62"
            text: qsTr("A")
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 200*parent.minSize
        }
    }

    ChartView {
        id: chartA
        width: parent.width*0.87
        height: parent.height*0.49
        backgroundColor: "#00000000"
        antialiasing:true
        localizeNumbers: true
        legend.visible: false

        property int lineXCounter: 0

        Component.onCompleted: {
        }

        ValueAxis {
            id: axisYA
            gridLineColor: "#44e78632"
            labelsFont.pixelSize: 13*root.minSize
            labelsFont.family: "Times New Roman"
            labelsFont.bold: true
            min: 0
            max: 120
            tickCount: 7
            labelFormat: "%.0f"
            labelsColor: "#000000"
        }

        DateTimeAxis {
            id: axisXA;
            titleFont.pixelSize: 8*root.minSize
            gridLineColor: "#44e78632"
            labelsFont.bold: true
            labelsFont.pixelSize: 15*chartA.width/(800*0.87)
            labelsFont.family: "Times New Roman"
            labelsColor: "#000000"
            format: "dd-HH:mm:ss"; //"yyyy MMM dd";HH:mm mm:ss
            tickCount: 7
            labelsAngle: 5
            min: new Date();
            max: new Date(new Date().valueOf()+12000)
        }

        ScatterSeries {
            id:scatterA
            color: "#e53c3c"
            axisX: axisXA
            axisY: axisYA
        }

        ScatterSeries {
            id:scatterSA
            color: "#61e26a"
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"Ug"
            color: colorTypeug
            id:lineUgA
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"IF"
            color: colorTypeif
            id:lineIfA
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"Il"
            color: colorTypeil
            id:lineIlA
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"Usyn"
            color: colorTypeusyn
            id:lineUsynA
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"Ugd"
            color: colorTypeugd
            id:lineUgdA
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"Igd"
            color: colorTypeigd
            id:lineIgdA
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"Uk"
            color: colorTypeuk
            id:lineUkA
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"P"
            color: colorTypep
            id:linePA
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"Q"
            color: colorTypeq
            id:lineQA
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"F"
            color: colorTypef
            id:lineFA
            axisX: axisXA
            axisY: axisYA
        }

        LineSeries {
            name:"Us"
            color: colorTypeus
            id:lineUsA
            axisX: axisXA
            axisY: axisYA
        }

        //采用的方式添加一个Rectangle在chartview里面实现标线的功能
        Rectangle{
            id : marklineA
            visible: false
            color: "#88a52a2a"

            property bool menabled: false
            property int plotw: chartA.plotArea.width
            property int ploth: chartA.plotArea.height
            property real vug: 0
            property real vif: 0
            property real vil: 0
            property real vusyn: 0
            property real vugd: 0
            property real vigd: 0
            property real vuk: 0
            property real vp: 0
            property real vq: 0
            property real vf: 0
            property real vus: 0

            x : chartA.plotArea.x;
            y : chartA.plotArea.y; // 默认在最上面

            width: chartA.markline_orientation===Qt.Horizontal?plotw:2
            height: chartA.markline_orientation===Qt.Horizontal?2:ploth

            Behavior on x {
                NumberAnimation {duration: 100;}
            }

            Text {
                id:marklineA_text
                text: "ug:\t"+parent.vug.toFixed(2)+"%\tif:\t"+parent.vif.toFixed(2)
                      +"%\nil:\t"+parent.vil.toFixed(2)+"%\tusyn:\t"+parent.vusyn.toFixed(2)
                      +"%\nugd:\t"+parent.vugd.toFixed(2)+"%\tigd:\t"+parent.vigd.toFixed(2)
                      +"%\nuk:\t"+parent.vuk.toFixed(2)+"%\tp:\t"+parent.vp.toFixed(2)
                      +"%\nq:\t"+parent.vq.toFixed(2)+"%\tvf:\t"+parent.vf.toFixed(2)
                      +"%\nus:\t"+parent.vus.toFixed(2)
                font.pointSize: 11
                x:10
                color: "#88a52a2a"
                state: "1"

                states: [
                    State {
                        name: "1"
                        PropertyChanges {
                            target: marklineA_text
                            x:10
                        }
                    },
                    State {
                        name: "2"
                        PropertyChanges {
                            target: marklineA_text
                            x:-marklineA_text.width
                        }
                    }
                ]
            }
        }
        function setMarkLine(x)
        {
            //将x的值进行转换
            var p2 = chartA.mapToValue(Qt.point(x,0),lineUgA);
            if(lineUgA.count<3)
            {
                return
            }

            var traverseminnum = 0
            var traversemin = lineUgA.at(traverseminnum)
            var traversemaxnum = lineUgA.count-1
            var traversemax = lineUgA.at(traversemaxnum)
            if(lineUgA.at(traverseminnum).x>p2.x
                    && lineUgA.at(traversemaxnum).x<p2.x) return
            for(var index=lineUgA.count/2; traversemaxnum-traverseminnum>1; )
            {
                if(lineUgA.at(index).x>p2.x)
                {
                    traversemaxnum = index
                    traversemax = lineUgA.at(index)
                }
                else
                {
                    traverseminnum = index
                    traversemin = lineUgA.at(index)
                }
                index = (traversemaxnum+traverseminnum)/2
            }
            var traverseResult
            if(p2.x>(lineUgA.at(traversemaxnum).x+lineUgA.at(traverseminnum).x)/2)
                traverseResult = traversemaxnum
            else traverseResult = traverseminnum

            //给信标赋值
            marklineA.vug = lineUgA.at(traverseResult).y
            marklineA.vif = lineIfA.at(traverseResult).y
            marklineA.vil = lineIlA.at(traverseResult).y
            marklineA.vusyn = lineUsynA.at(traverseResult).y
            marklineA.vugd = lineUgdA.at(traverseResult).y
            marklineA.vigd = lineIgdA.at(traverseResult).y
            marklineA.vuk = lineUkA.at(traverseResult).y
            marklineA.vp = linePA.at(traverseResult).y
            marklineA.vq = lineQA.at(traverseResult).y
            marklineA.vf = lineFA.at(traverseResult).y
            marklineA.vus = lineUsA.at(traverseResult).y
            //移动信标到栅格
            var traverseResultX = mapToPosition(lineUgA.at(traverseResult),lineUgA).x
            marklineA.x = traverseResultX
            if(traverseResultX>chartA.width/2) marklineA_text.state = "2"
            else marklineA_text.state = "1"

//            console.log(new Date(lineUgA.at(traversemaxnum).x))
        }
        Timer{
            id:marklineA_timer
            interval: 5000
            running: false
            repeat: false
            onTriggered: marklineA.visible = false
        }

        MouseArea {
            id: aChartSlideMouse
            property int xMouse
            height: parent.height*0.8
            anchors.top: parent.top
            anchors.topMargin: 0
            anchors.right: parent.right
            anchors.left: parent.left
            //存储鼠标x坐标
            acceptedButtons: Qt.LeftButton //只处理鼠标左键
            //接收鼠标按下事件
            onPressed: {
                xMouse = mouseX
                if(marklineA.menabled)
                {
                    chartA.setMarkLine(mouseX)
                    marklineA.visible = true
                    marklineA_timer.running = false
                    marklineA_timer.running = true
                }
            }

            //鼠标按下后改变位置
            onPositionChanged: {
                if(marklineA.menabled)
                {
                    chartA.setMarkLine(mouseX)
                    marklineA.visible = true
                    marklineA_timer.running = false
                    marklineA_timer.running = true
                    return
                }
                var t = (mouseX - xMouse)/height*(axisXA.max-axisXA.min)*0.35
                xMouse = mouseX
                var max = axisXA.max.valueOf()
                var min = axisXA.min.valueOf()
                axisXA.max = new Date(max-t*1)
                axisXA.min = new Date(min-t*1)
                if(abAxisYAlign && root.state != "chartAOnly"){
                    axisXB.max = axisXA.max
                    axisXB.min = axisXA.min
                }
            }
            onWheel: {
                var max = axisXA.max.valueOf()
                var min = axisXA.min.valueOf()
                var t = wheel.angleDelta.y/360;
                var j = (axisXA.max.valueOf()-axisXA.min.valueOf())
                if(t>0 && j<11000){
                }
                else{
                    axisXA.max = new Date(max - Math.floor(j*t/2))
                    axisXA.min = new Date(min + Math.floor(j*t/2))
                    if(abAxisYAlign && root.state != "chartAOnly")
                    {
                        axisXB.max = axisXA.max
                        axisXB.min = axisXA.min
                    }
                }
            }
        }

        MouseArea {
            id:aChartFloatMouse
            anchors.fill: parent
            drag.target: parent
            onReleased: {
                if(drag.active)
                    if(mouseY+parent.y>root.height/2)
                        root.state = "chartBUp";
                    else
                        root.state = "chartAUp";
            }
            onDoubleClicked: {
                if(root.state == "chartAOnly")
                    root.state = "chartAUp";
                else
                    root.state = "chartAOnly";
            }
        }

        Rectangle{
            width: parent.width*0.05
            height: parent.height
            color: mouseArea_AExtend.pressed? "#44e99051":"#22e99051"
            anchors.left: parent.left
            Text {
                color: mouseArea_AExtend.pressed? "#88e99051":"#44e99051"
                text: qsTr("<>")
                font.bold: true
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 30*root.minSize
            }

            MouseArea {
                id: mouseArea_AExtend
                anchors.fill: parent
                onClicked: {
                    var max = axisXA.max.valueOf()
                    var min = axisXA.min.valueOf()
                    var step = max - min
                    axisXA.max = new Date(max + step)
                    axisXA.min = new Date(min - step)
                    if(abAxisYAlign && root.state != "chartAOnly")
                    {
                        axisXB.max = axisXA.max
                        axisXB.min = axisXA.min
                    }
                }
            }
        }

        Rectangle{
            width: parent.width*0.05
            height: parent.height
            color: mouseArea_ANarrow.pressed? "#44e99051":"#22e99051"
            anchors.right: parent.right
            Text {
                color: mouseArea_ANarrow.pressed? "#88e99051":"#44e99051"
                text: qsTr("><")
                font.bold: true
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 30*root.minSize
            }

            MouseArea {
                id: mouseArea_ANarrow
                anchors.fill: parent
                onClicked: {
                    var max = axisXA.max.valueOf()
                    var min = axisXA.min.valueOf()
                    var step = max - min
                    if(step/2>11000)
                    {
                        axisXA.max = new Date(max - step/4)
                        axisXA.min = new Date(min + step/4)
                        if(abAxisYAlign && root.state != "chartAOnly")
                        {
                            axisXB.max = axisXA.max
                            axisXB.min = axisXA.min
                        }
                    }
                }
            }
        }

    }

    Rectangle {
        id: rectangle_ChartBBackground
        color: "#AAAADDDD"
        anchors.fill: chartB
        property real minSize: Math.min(width/696, height/235)
        Text {
            color: "#44ea6262"
            text: qsTr("B")
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 200*parent.minSize
        }
    }

    ChartView {
        id: chartB
        width: parent.width*0.87
        height: parent.height*0.49
        backgroundColor: "#00000000"
        y:parent.height*0.51
        antialiasing:true
        legend.visible: false
        localizeNumbers: true
        property int lineXCounter: 0
        property int doubleClickAble: 0

        ValueAxis {
            id: axisYB
            gridLineColor: "#44e78632"
            labelsFont.pixelSize: 13*root.minSize
            labelsFont.family: "Times New Roman"
            labelsFont.bold: true
            min: 0
            max: 120
            tickCount: 7
            labelFormat: "%.0f"
            labelsColor: "#000000"
        }

        DateTimeAxis {
            id: axisXB;
            gridLineColor: "#44e78632"
            labelsFont.bold: true
            labelsFont.pixelSize: 15*chartB.width/(800*0.87)
            labelsFont.family: "Times New Roman"
            labelsColor: "#000000"

            format: "dd-HH:mm:ss"; //"yyyy MMM dd";HH:mm mm:ss
            tickCount: 7
            labelsAngle: 5
            min: new Date();
            max: new Date(new Date().valueOf()+12000)
        }


        ScatterSeries {
            id:scatterB
            color: "#e53c3c"
            axisX: axisXB
            axisY: axisYB
        }
        ScatterSeries {
            id:scatterSB
            color: "#61e26a"
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"Ug"    //red
            color: colorTypeug
            id:lineUgB
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"IF"    //purple
            color: colorTypeif
            id:lineIfB
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"Il"   //red orange
            color: colorTypeil
            id:lineIlB
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"Usyn" //blue
            color: colorTypeusyn
            id:lineUsynB
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"Ugd"  //green
            color: colorTypeugd
            id:lineUgdB
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"Igd"  //yello
            color: colorTypeigd
            id:lineIgdB
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"Uk"   //orange
            color: colorTypeuk
            id:lineUkB
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"P"    //yello green
            color: colorTypep
            id:linePB
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"Q"    //blue green
            color: colorTypeq
            id:lineQB
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"F"    //red purple
            color: colorTypef
            id:lineFB
            axisX: axisXB
            axisY: axisYB
        }

        LineSeries {
            name:"Us"   //yello orange
            color: colorTypeus
            id:lineUsB
            axisX: axisXB
            axisY: axisYB
        }

        //采用的方式添加一个Rectangle在chartview里面实现标线的功能
        Rectangle{
            id : marklineB
            visible: false
            color: "#88a52a2a"

            property bool menabled: false
            property int plotw: chartB.plotArea.width
            property int ploth: chartB.plotArea.height
            property real vug: 0
            property real vif: 0
            property real vil: 0
            property real vusyn: 0
            property real vugd: 0
            property real vigd: 0
            property real vuk: 0
            property real vp: 0
            property real vq: 0
            property real vf: 0
            property real vus: 0

            x : chartB.plotArea.x;
            y : chartB.plotArea.y; // 默认在最上面

            width: chartB.markline_orientation===Qt.Horizontal?plotw:2
            height: chartB.markline_orientation===Qt.Horizontal?2:ploth

            Behavior on x {
                NumberAnimation {duration: 100;}
            }

            Text {
                id:marklineB_text
                text: "ug:\t"+parent.vug.toFixed(2)+"%\tif:\t"+parent.vif.toFixed(2)
                      +"%\nil:\t"+parent.vil.toFixed(2)+"%\tusyn:\t"+parent.vusyn.toFixed(2)
                      +"%\nugd:\t"+parent.vugd.toFixed(2)+"%\tigd:\t"+parent.vigd.toFixed(2)
                      +"%\nuk:\t"+parent.vuk.toFixed(2)+"%\tp:\t"+parent.vp.toFixed(2)
                      +"%\nq:\t"+parent.vq.toFixed(2)+"%\tvf:\t"+parent.vf.toFixed(2)
                      +"%\nus:\t"+parent.vus.toFixed(2)
                font.pointSize: 11
                x:10
                color: "#88a52a2a"
                state: "1"

                states: [
                    State {
                        name: "1"
                        PropertyChanges {
                            target: marklineB_text
                            x:10
                        }
                    },
                    State {
                        name: "2"
                        PropertyChanges {
                            target: marklineB_text
                            x:-marklineB_text.width
                        }
                    }
                ]
            }
        }
        function setMarkLine(x)
        {
            //将x的值进行转换
            var p2 = chartB.mapToValue(Qt.point(x,0),lineUgB);
            if(lineUgB.count<3)
            {
                return
            }

            var traverseminnum = 0
            var traversemin = lineUgB.at(traverseminnum)
            var traversemaxnum = lineUgB.count-1
            var traversemax = lineUgB.at(traversemaxnum)
            if(lineUgB.at(traverseminnum).x>p2.x
                    && lineUgB.at(traversemaxnum).x<p2.x) return
            for(var index=lineUgB.count/2; traversemaxnum-traverseminnum>1; )
            {
                if(lineUgB.at(index).x>p2.x)
                {
                    traversemaxnum = index
                    traversemax = lineUgB.at(index)
                }
                else
                {
                    traverseminnum = index
                    traversemin = lineUgB.at(index)
                }
                index = (traversemaxnum+traverseminnum)/2
            }
            var traverseResult
            if(p2.x>(lineUgB.at(traversemaxnum).x+lineUgB.at(traverseminnum).x)/2)
                traverseResult = traversemaxnum
            else traverseResult = traverseminnum

            //给信标赋值
            marklineB.vug = lineUgB.at(traverseResult).y
            marklineB.vif = lineIfB.at(traverseResult).y
            marklineB.vil = lineIlB.at(traverseResult).y
            marklineB.vusyn = lineUsynB.at(traverseResult).y
            marklineB.vugd = lineUgdB.at(traverseResult).y
            marklineB.vigd = lineIgdB.at(traverseResult).y
            marklineB.vuk = lineUkB.at(traverseResult).y
            marklineB.vp = linePB.at(traverseResult).y
            marklineB.vq = lineQB.at(traverseResult).y
            marklineB.vf = lineFB.at(traverseResult).y
            marklineB.vus = lineUsB.at(traverseResult).y
            //移动信标到栅格
            var traverseResultX = mapToPosition(lineUgB.at(traverseResult),lineUgB).x
            marklineB.x = traverseResultX
            if(traverseResultX>chartB.width/2) marklineB_text.state = "2"
            else marklineB_text.state = "1"

//            console.log(new Date(lineUgB.at(traversemaxnum).x))
        }
        Timer{
            id:marklineB_timer
            interval: 5000
            running: false
            repeat: false
            onTriggered: marklineB.visible = false
        }

        MouseArea {
            id: bChartSlideMouse
            property int xMouse
            height: parent.height*0.8
            anchors.top: parent.top
            anchors.topMargin: 0
            anchors.right: parent.right
            anchors.left: parent.left
            //存储鼠标x坐标
            acceptedButtons: Qt.LeftButton //只处理鼠标左键
            //接收鼠标按下事件
            onPressed: {
                xMouse = mouseX
                if(marklineB.menabled)
                {
                    chartB.setMarkLine(mouseX)
                    marklineB.visible = true
                    marklineB_timer.running = false
                    marklineB_timer.running = true
                }
            }
            //鼠标按下后改变位置
            onPositionChanged: {
                if(marklineB.menabled)
                {
                    chartB.setMarkLine(mouseX)
                    marklineB.visible = true
                    marklineB_timer.running = false
                    marklineB_timer.running = true
                    return
                }
                var t = (mouseX - xMouse)/height*(axisXB.max-axisXB.min)*0.35
                xMouse = mouseX
                var max = axisXB.max.valueOf()
                var min = axisXB.min.valueOf()
                axisXB.max = new Date(max-t*1)
                axisXB.min = new Date(min-t*1)

                if(abAxisYAlign && root.state != "chartBOnly"){
                    axisXB.min = axisXA.min
                    axisXB.max = axisXA.max
                }
            }
            onWheel: {
                var max = axisXB.max.valueOf()
                var min = axisXB.min.valueOf()
                var t = wheel.angleDelta.y/360;
                var j = (axisXB.max.valueOf()-axisXB.min.valueOf())
                if(t>0 && j<11000){
                }
                else{
                    axisXB.max = new Date(max - Math.floor(j*t/2))
                    axisXB.min = new Date(min + Math.floor(j*t/2))
                    if(abAxisYAlign && root.state != "chartBOnly"){
                        axisXB.min = axisXA.min
                        axisXB.max = axisXA.max
                    }
                }
            }
        }

        MouseArea {
            id:bChartFloatMouse
            anchors.fill: parent
            drag.target: parent
            onReleased: {
                if(drag.active)
                    if(mouseY+parent.y>root.height/2)
                        root.state = "chartAUp";
                    else
                        root.state = "chartBUp";
            }
            onDoubleClicked: {
                if(root.state == "chartBOnly")
                    root.state = "chartBUp";
                else
                    root.state = "chartBOnly";
            }
        }


        Rectangle{
            width: parent.width*0.05
            height: parent.height
            color: mouseArea_BExtend.pressed? "#44ea6262":"#22ea6262"
            anchors.left: parent.left
            Text {
                color: mouseArea_BExtend.pressed? "#88ea6262":"#44ea6262"
                text: qsTr("<>")
                font.bold: true
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 30*root.minSize
            }

            MouseArea {
                id: mouseArea_BExtend
                anchors.fill: parent
                onClicked: {
                    var max = axisXB.max.valueOf()
                    var min = axisXB.min.valueOf()
                    var step = max - min
                    axisXB.max = new Date(max + step)
                    axisXB.min = new Date(min - step)
                    if(abAxisYAlign && root.state != "chartBOnly"){
                        axisXA.min = axisXB.min
                        axisXA.max = axisXB.max
                    }
                }
            }
        }

        Rectangle{
            width: parent.width*0.05
            height: parent.height
            color: mouseArea_BNarrow.pressed? "#44ea6262":"#22ea6262"
            anchors.right: parent.right
            Text {
                color: mouseArea_BNarrow.pressed? "#88ea6262":"#44ea6262"
                text: qsTr("><")
                font.bold: true
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 30*root.minSize
            }

            MouseArea {
                id: mouseArea_BNarrow
                anchors.fill: parent
                onClicked: {
                    var max = axisXB.max.valueOf()
                    var min = axisXB.min.valueOf()
                    var step = max - min
                    if(step/2>11000)
                    {
                        axisXB.max = new Date(max - step/4)
                        axisXB.min = new Date(min + step/4)
                        if(abAxisYAlign && root.state != "chartBOnly"){
                            axisXA.min = axisXB.min
                            axisXA.max = axisXB.max
                        }
                    }
                }
            }
        }

    }

    Rectangle {
        id: rectangle
        width: parent.width*0.13
        height: 50*root.minSize
        color: "#aa92dccd"
        radius: 7*root.minSize
        anchors.right: parent.right
        scale: funcMouse.pressed?0.9:1
        Text {
            text: qsTr("功能菜单")
            font.family: "Verdana"
            font.pixelSize: 13*root.minSize
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            anchors.fill: parent
        }
        MouseArea{
            id:funcMouse
            anchors.fill: parent
            onClicked: {
                contentMenu.popup()

            }

            Menu { // 右键菜单
                //title: "Edit"
                id: contentMenu
                font.family: "Verdana"

                MenuItem {
                    text: qsTr("加载数据库")
                    onTriggered: {excRecordDisplayer.sl_selectDatabase()}
                }

                MenuItem {
                    text: qsTr("加载数据")
                    onTriggered: {clearAllChart();excRecordDisplayer.sl_showLoadSettingUI(1);}
                    Timer{
                        interval: 800
                        repeat: true
                        triggeredOnStart: false
                        running: true
                        property int mdate: 0
                        onTriggered: parent.enabled = excRecordDisplayer.sl_isDatabaseOpen()
                    }
                }

                MenuSeparator { }

                MenuItem {
                    text: qsTr("全屏")
                    onTriggered: {excRecordDisplayer.sl_fullScreen()}
                }

                MenuItem {
                    text: qsTr("浮动")
                    checkable: true
                    onTriggered: {
                        setMouseAreaEnableOrNot(checked)
                        if(checked)
                        {
                            setabAxisYAlign(false)
                            align.checked = false
                            align.enabled = false
                        }
                        else
                        {
                            align.enabled = true
                        }
                    }
                }
                MenuItem {
                    id:align
                    text: qsTr("对齐")
                    checkable: true
                    onTriggered: {
                        setabAxisYAlign(checked)
                    }
                }
                MenuItem {
                    id:beacon_switch
                    text: qsTr("信标开关")
                    checkable: true
                    onTriggered: {
                        marklineA.menabled = checked
                        marklineB.menabled = checked
                    }
                }

                Menu{
                    id:xAisDispalySetting
                    title: qsTr("X轴显示设置")

                    MenuItem {
                        id:ymdhms
                        text: qsTr("年月日时")
                        checkable: true
                        onClicked: {
                            xAisDispalySetting.resetAllymdItem()
                            checked=true
                            axisXA.format = "yy-MM-dd_HH"
//                            axisXA.labelsAngle = 35
                            axisXB.format = "yy-MM-dd_HH"
//                            axisXB.labelsAngle = 35
                        }
                    }
                    MenuItem {
                        id:mdhms
                        text: qsTr("月日时分")
                        checkable: true
                        onClicked: {
                            xAisDispalySetting.resetAllymdItem()
                            checked=true
                            axisXA.format = "MM-dd_HH:mm"
//                            axisXA.labelsAngle = 35
                            axisXB.format = "MM-dd_HH:mm"
//                            axisXB.labelsAngle = 35
                        }
                    }
                    MenuItem {
                        id:dhms
                        text: qsTr("日时分秒")
                        checkable: true
                        checked: true
                        onClicked: {
                            xAisDispalySetting.resetAllymdItem()
                            checked=true
                            axisXA.format = "dd_HH:mm:ss"
//                            axisXA.labelsAngle = 35
                            axisXB.format = "dd_HH:mm:ss"
//                            axisXB.labelsAngle = 35
                        }
                    }
                    MenuItem {
                        id:hms
                        text: qsTr("时分秒")
                        checkable: true
                        onClicked: {
                            xAisDispalySetting.resetAllymdItem()
                            checked=true
                            axisXA.format = "HH:mm:ss"
//                            axisXA.labelsAngle = 25
                            axisXB.format = "HH:mm:ss"
//                            axisXB.labelsAngle = 25
                        }
                    }
                    function resetAllymdItem()
                    {
                        ymdhms.checked = false;
                        mdhms.checked = false;
                        dhms.checked = false;
                        hms.checked = false;
                    }
                }
                MenuItem {
                    text: qsTr("切换到数据界面")
                    onTriggered: {
                        root.parent.parent.currentIndex = 1
                    }
                }

                MenuSeparator { }
                MenuItem {
                    text: qsTr("清除")
                    onTriggered: {
                        clearAllChart()
                    }
                }

                MenuItem {
                    text: qsTr("无动作")
                }
            }
        }
    }

    ColumnLayout {
        id: grid
        width: parent.width*0.13
        anchors.bottom: parent.bottom
        anchors.top: rectangle.bottom
        anchors.right: parent.right
        property int checkboxFontPointsize: 13*parent.width/800

        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypeug
            text: qsTr("机端电压")
            textSize: parent.checkboxFontPointsize
            checked: true
            onCheckStateChanged: {
                lineUgA.visible = checked
                lineUgB.visible = checked
            }
        }
        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypeif
            textSize: parent.checkboxFontPointsize
            text: qsTr("机端电流")
            checked: true
            onCheckStateChanged: {
                lineIfA.visible = checked
                lineIfB.visible = checked
            }
        }
        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypeil
            textSize: parent.checkboxFontPointsize
            text: qsTr("励磁电流")
            checked: true
            onCheckStateChanged: {
                lineIlA.visible = checked
                lineIlB.visible = checked
            }
        }
        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypeusyn
            textSize: parent.checkboxFontPointsize
            text: qsTr("同步电压")
            checked: true
            onCheckStateChanged: {
                lineUsynA.visible = checked
                lineUsynB.visible = checked
            }
        }
        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypeugd
            textSize: parent.checkboxFontPointsize
            text: qsTr("自动给定")
            checked: true
            onCheckStateChanged: {
                lineUgdA.visible = checked
                lineUgdB.visible = checked
            }
        }
        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypeigd
            textSize: parent.checkboxFontPointsize
            text: qsTr("手动给定")
            checked: true
            onCheckStateChanged: {
                lineIgdA.visible = checked
                lineIgdB.visible = checked
            }
        }
        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypeuk
            textSize: parent.checkboxFontPointsize
            text: qsTr("控制信号")
            checked: true
            onCheckStateChanged: {
                lineUkA.visible = checked
                lineUkB.visible = checked
            }
        }
        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypep
            textSize: parent.checkboxFontPointsize
            text: qsTr("有功功率")
            checked: true
            onCheckStateChanged: {
                linePA.visible = checked
                linePB.visible = checked
            }
        }
        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypeq
            textSize: parent.checkboxFontPointsize
            text: qsTr("无功功率")
            checked: true
            onCheckStateChanged: {
                lineQA.visible = checked
                lineQB.visible = checked
            }
        }
        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypef
            textSize: parent.checkboxFontPointsize
            text: qsTr("电压频率")
            checked: true
            onCheckStateChanged: {
                lineFA.visible = checked
                lineFB.visible = checked
            }
        }
        EXC_Normal_CheckBoxSytleClickable {
            checkedColor:colorTypeus
            textSize: parent.checkboxFontPointsize
            text: qsTr("系统电压")
            checked: true
            onCheckStateChanged: {
                lineUsA.visible = checked
                lineUsB.visible = checked
            }
        }

    }

    BusyIndicator {
        id: busyIndicator
        width: 100
        height: 100
        running: false
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        Text {
            id: busyIndicator_value
            property real value: 0
            text: value.toFixed(2)+"%"
            font.pixelSize: 13
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            anchors.fill: parent
            visible: false
        }
    }
    function setBusyIndicator(sorn){busyIndicator.running = sorn; busyIndicator_value.visible = sorn;}
    function setBusyIndicatorValue(value){busyIndicator_value.value = value}

    states: [
        State {
            name: "chartAUp"
            PropertyChanges {
                target: chartA
                x:0
                y:0
                height : root.height*0.49
            }
            PropertyChanges {
                target: chartB
                x:0
                y:parent.height*0.51
                height : root.height*0.49
            }
        },
        State {
            name: "chartBUp"
            PropertyChanges {
                target: chartA
                x:0
                y:parent.height*0.51
                height : root.height*0.49
            }
            PropertyChanges {
                target: chartB
                x:0
                y:0
                height : root.height*0.49
            }
        },
        State {
            name: "chartAOnly"
            PropertyChanges {
                target: chartA
                x:0
                y:0
                height : root.height
            }
            PropertyChanges {
                target: rectangle_ChartBBackground
                visible:false
            }
            PropertyChanges {
                target: chartB
                x:0
                y:0
                height : root.height*0.49
                visible:false
            }
            PropertyChanges {
                target: axisYA
                tickCount:13
                labelsFont.pixelSize: 18*root.minSize
            }
        },
        State {
            name: "chartBOnly"
            PropertyChanges {
                target: chartA
                x:0
                y:parent.height*0.51
                height : root.height*0.49
                visible:false
            }
            PropertyChanges {
                target: rectangle_ChartABackground
                visible:false
            }
            PropertyChanges {
                target: chartB
                x:0
                y:0
                height : root.height
            }
            PropertyChanges {
                target: axisYB
                tickCount:13
                labelsFont.pixelSize: 18*root.minSize
            }
        }
    ]

    Component.onCompleted: {
        setMouseAreaEnableOrNot(false)
    }

    function setMouseAreaEnableOrNot(EnableOrNot){
        if(EnableOrNot)
        {
            aChartFloatMouse.visible = true;
            bChartFloatMouse.visible = true;
            aChartSlideMouse.visible = false;
            bChartSlideMouse.visible = false;
        }
        else
        {
            aChartFloatMouse.visible = false;
            bChartFloatMouse.visible = false;
            aChartSlideMouse.visible = true;
            bChartSlideMouse.visible = true;
        }
    }

    function setabAxisYAlign(sorn){
        abAxisYAlign = sorn
    }

    function addScatterPointSingal(whichScatter, whichLine){
        whichScatter.append(whichLine.at(whichLine.count-1).x, whichLine.at(whichLine.count-1).y);
    }

    //clear chart
    function clearAllChart(){
        scatterA.clear()
        scatterSA.clear()
        lineUgA.clear()
        lineIfA.clear()
        lineIlA.clear()
        lineUsynA.clear()
        lineUgdA.clear()
        lineIgdA.clear()
        lineUkA.clear()
        linePA.clear()
        lineQA.clear()
        lineFA.clear()
        lineUsA.clear()

        scatterB.clear()
        scatterSB.clear()
        lineUgB.clear()
        lineIfB.clear()
        lineIlB.clear()
        lineUsynB.clear()
        lineUgdB.clear()
        lineIgdB.clear()
        lineUkB.clear()
        linePB.clear()
        lineQB.clear()
        lineFB.clear()
        lineUsB.clear()
    }

    //add scatter point
    function addScatterPointStartA(){
        addScatterPointSingal(scatterSA,lineUgA)
        addScatterPointSingal(scatterSA,lineIfA)
        addScatterPointSingal(scatterSA,lineIlA)
        addScatterPointSingal(scatterSA,lineUsynA)
        addScatterPointSingal(scatterSA,lineUgdA)
        addScatterPointSingal(scatterSA,lineIgdA)
        addScatterPointSingal(scatterSA,lineUkA)
        addScatterPointSingal(scatterSA,linePA)
        addScatterPointSingal(scatterSA,lineQA)
        addScatterPointSingal(scatterSA,lineFA)
        addScatterPointSingal(scatterSA,lineUsA)
    }

    function addScatterPointStartB(){
        addScatterPointSingal(scatterSB,lineUgB)
        addScatterPointSingal(scatterSB,lineIfB)
        addScatterPointSingal(scatterSB,lineIlB)
        addScatterPointSingal(scatterSB,lineUsynB)
        addScatterPointSingal(scatterSB,lineUgdB)
        addScatterPointSingal(scatterSB,lineIgdB)
        addScatterPointSingal(scatterSB,lineUkB)
        addScatterPointSingal(scatterSB,linePB)
        addScatterPointSingal(scatterSB,lineQB)
        addScatterPointSingal(scatterSB,lineFB)
        addScatterPointSingal(scatterSB,lineUsB)
    }


    function addScatterPointEndA(){
        addScatterPointSingal(scatterA,lineUgA)
        addScatterPointSingal(scatterA,lineIfA)
        addScatterPointSingal(scatterA,lineIlA)
        addScatterPointSingal(scatterA,lineUsynA)
        addScatterPointSingal(scatterA,lineUgdA)
        addScatterPointSingal(scatterA,lineIgdA)
        addScatterPointSingal(scatterA,lineUkA)
        addScatterPointSingal(scatterA,linePA)
        addScatterPointSingal(scatterA,lineQA)
        addScatterPointSingal(scatterA,lineFA)
        addScatterPointSingal(scatterA,lineUsA)
    }

    function addScatterPointEndB(){
        addScatterPointSingal(scatterB,lineUgB)
        addScatterPointSingal(scatterB,lineIfB)
        addScatterPointSingal(scatterB,lineIlB)
        addScatterPointSingal(scatterB,lineUsynB)
        addScatterPointSingal(scatterB,lineUgdB)
        addScatterPointSingal(scatterB,lineIgdB)
        addScatterPointSingal(scatterB,lineUkB)
        addScatterPointSingal(scatterB,linePB)
        addScatterPointSingal(scatterB,lineQB)
        addScatterPointSingal(scatterB,lineFB)
        addScatterPointSingal(scatterB,lineUsB)
    }

    //add line point
    function addLinePointSingal(newTimeValueOf, whichLine, vary){
        whichLine.append(newTimeValueOf, vary)
    }
    function addLinePointA(datethis, var1)
    {
        addLinePointSingal(datethis,lineUgA,var1[0]/100)
        addLinePointSingal(datethis,lineIfA,var1[1]/100)
        addLinePointSingal(datethis,lineIlA,var1[2]/100)
        addLinePointSingal(datethis,lineUsynA,var1[3]/100)
        addLinePointSingal(datethis,lineUgdA,var1[4]/100)
        addLinePointSingal(datethis,lineIgdA,var1[5]/100)
        addLinePointSingal(datethis,lineUkA,var1[6]*180/10000)
        addLinePointSingal(datethis,linePA,var1[7]/100)
        addLinePointSingal(datethis,lineQA,var1[8]/100)
        addLinePointSingal(datethis,lineFA,var1[9]/100)
        addLinePointSingal(datethis,lineUsA,var1[10]/100)
    }
    function addLinePointB(datethis, var1)
    {
        addLinePointSingal(datethis,lineUgB,var1[0]/100)
        addLinePointSingal(datethis,lineIfB,var1[1]/100)
        addLinePointSingal(datethis,lineIlB,var1[2]/100)
        addLinePointSingal(datethis,lineUsynB,var1[3]/100)
        addLinePointSingal(datethis,lineUgdB,var1[4]/100)
        addLinePointSingal(datethis,lineIgdB,var1[5]/100)
        addLinePointSingal(datethis,lineUkB,var1[6]*180/10000)
        addLinePointSingal(datethis,linePB,var1[7]/100)
        addLinePointSingal(datethis,lineQB,var1[8]/100)
        addLinePointSingal(datethis,lineFB,var1[9]/100)
        addLinePointSingal(datethis,lineUsB,var1[10]/100)
    }

    //test
    function testFunc(var1, var2)
    {
        console.log(var1)
        console.log(var2)
        console.log(var2[0])
        console.log(var2[1])
    }

}
